<template>
    <div>
        <Title>ERP商品销售订单</Title>
        <NuxtLayout name="common">
            <div class="erp-box mt-[30px]">
                <t-card title="销售订单列表" :bordered="false">
                    <span v-if="isOrder">
                        <t-list>
                            <t-list-item v-for="(item, index) in orderList">
                                <b>{{ item.content.username }} 的ERP销售订单信息</b>
                                <template #action>
                                    <t-button theme="primary" hover="color" style="margin-left: 16px"
                                        @click="showOrderDetail(index)"> 详情 </t-button>
                                </template>
                            </t-list-item>
                        </t-list>
                    </span>
                    <span v-else>
                        不存在销售订单，无需查看
                    </span>
                </t-card>
            </div>
            <client-only>
                <div class="dialog-box">
                    <t-dialog v-model:visible="isShowDetail" header="详情" width="50%" :on-close="close">
                        <span class="text-lg block font-[600]">品名</span>
                        <span class="block" v-for="(item, index) in detailContent.data.goods_list">{{ item.goods_title
                            }}--------------{{ item.goods_size }}码----------------{{ item.goods_number }}件</span>
                        <span class="text-lg block font-[600]">收货信息</span>
                        <span class="block">收件人：{{ detailContent.data.content.username }}</span>
                        <span class="block">联系电话：{{ detailContent.data.content.phone }}</span>
                        <span class="block">收件地址：{{ detailContent.data.content.address }}</span>
                        <span class="text-lg block font-[600]">销售订单信息</span>
                        <span class="block">销售订单状态：已审核</span>
                        <span class="block">销售订单单号：{{ detailContent.data.sale.order_number }}</span>
                        <span class="block">销售订单时间：{{ detailContent.data.sale.order_time }}</span>
                        <span class="block">销售订单来源：{{ detailContent.data.sale.order_from }}</span>
                        <span class="text-lg block font-[600]">物流状态</span>
                        <span v-if="detailContent.data.out_warehouse.express_number === ''">暂未发货</span>
                        <span v-else>
                            <span class="block">物流单号：{{ detailContent.data.out_warehouse.express_number }}</span>
                            <span class="block">物流出库时间：{{ detailContent.data.out_warehouse.out_time }}</span>
                        </span>
                    </t-dialog>
                </div>
            </client-only>
        </NuxtLayout>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';

// 是否显示详情
const isShowDetail = ref(false);

// 详情内容
const detailContent = reactive({
    data: {
        content: {
            username: '张三',
            phone: '13800138000',
            address: '重庆市北碚区蔡家岗街道倍都佳园D区'
        },
        goods_list: [],
        sale: {
            order_number: '',
            order_time: '',
            order_from: ''
        },
        out_warehouse: {
            warehouse_name: '',
            out_number: '',
            out_time: '',
            express_number: '',
        }
    }
});

// 关闭dialog
const close = () => {
    isShowDetail.value = false
}

// 点击显示详情按钮
const showOrderDetail = (index) => {
    // 获取本地订单表
    let orderTable = localStorage.getItem('orderTable') || [];
    orderTable = JSON.parse(orderTable);
    console.log(orderTable[index]);

    detailContent.data = orderTable[index];
    isShowDetail.value = true
}

// 是否存在销售订单
const isOrder = ref(false);

// 销售订单列表
const orderList = ref([]);

// 获取本地订单
const __initiaze = () => {
    // 获取本地订单
    let orderTable = localStorage.getItem('orderTable');
    if (orderTable === null) { // 无本地订单
        isOrder.value = false;
    } else { // 有本地订单
        orderList.value = JSON.parse(orderTable);
        isOrder.value = true;
    }
}

onMounted(() => {
    setInterval(() => {
        __initiaze()
    }, 5000)
})
</script>

<style scoped></style>